<template>
    <div>
        <Header/>
        <div class="all">
             <div class="main" v-for="(v,i) in arr" :key="i">
            <img :src="v.pic" alt="">
            <h3>{{v.gname}}</h3>
            <p>渠道特价</p>
            <span>{{v.price1}}</span>&nbsp;
            <s>{{v.price2}}</s>
            <b>找相似</b>
        </div>
        </div>
    </div>
</template>

<script>
import Header from "../../components/hanchaobo/header"
import {getlink} from "../../api/getapi.js"

export default {
    components:{
        Header
    },
     data(){
        return{
            arr:[]
        }
    },
     mounted(){
    getlink("/api/findGoodsByFlag0").then(ok => {
      this.arr=ok.data;
      this.arr=this.arr.slice(1,4);
      this.arr=this.arr.reverse();
    });
  }
}
</script>

<style scoped>
   .all{
       width: 100%;
       display: flex;
       justify-content: space-between;
       flex-wrap: wrap;
   }
   .all .main{
       width: 47%;
       margin-bottom: 0.2rem;
   }
   .all .main:nth-of-type(1){
    margin-top: 3.9rem;
}
.all .main:nth-of-type(2){
    margin-top: 3.9rem;
}
   .all .main p{
       width: 1rem;
       height: 0.3rem;
       border:0.01rem solid red;
       color: red;
       text-align: center;
       line-height: 0.3rem;
       border-radius: 0.05rem;
       margin-top: 0.1rem;
   }
   .all .main img{
       width: 100%;
   }
   .all .main span{
       color: red;
       font-size: 0.3rem;
       font-weight: 700;
   }
    .all .main b{
        font-weight: 300;
        color: gray;
    }
</style>
